<template>
  <div class="access-denied">
    <header>
      <p>访问受限</p>
    </header>
    <div class="content">
      <i class="fa-solid fa-ban fa-3x"></i>
      <h3>抱歉，您没有权限访问此页面</h3>
      <p>当前账号类型无法查看该页面内容</p>
      <button @click="goBack" class="back-btn">返回上一页</button>
      <button @click="goToDashboard" class="dashboard-btn">前往控制台</button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.go(-1)
}

const goToDashboard = () => {
  const userRole = sessionStorage.getItem('userRole')
  if (userRole === 'business') {
    router.push('/BusinessEnd')
  } else {
    router.push('/index')
  }
}
</script>

<style scoped>
.access-denied {
  text-align: center;
  padding: 20px;
}

.content {
  margin-top: 50px;
}

.content i {
  color: #ff6b6b;
  margin-bottom: 20px;
}

h3 {
  color: #333;
  margin-bottom: 10px;
}

p {
  color: #666;
  margin-bottom: 30px;
}

.back-btn, .dashboard-btn {
  padding: 10px 20px;
  margin: 0 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.back-btn {
  background: #f0f0f0;
  color: #333;
}

.dashboard-btn {
  background: #0097ff;
  color: white;
}
</style>